<template>
  <!-- 榜上力量页面 -->
  <div class="strength main-body">
    <ul class="tab-box">
      <li v-for="(item,index) in tabList" :key="index" :class="index===selet?'active':''" @click="tabClick1(index)">{{ item }}</li>
    </ul>
    <div class="ranking">
      <span>网站精心推出最受大众喜爱的品牌榜单牌榜单</span>
      &nbsp;
      &nbsp;
      &nbsp;
      <button @click="showDialog = true">点我上榜</button>
    </div>
    <div v-show="selet===0">
      <welcome />
    </div>
    <div v-show="selet===1">
      <welcome />
    </div>
    <div v-show="selet===2">
      <welcome />
    </div>
    <div v-show="selet===3">
      <welcome />
    </div>
    <div v-show="selet===4">
      <welcome />
    </div>

    <!-- 点我上榜弹窗 -->
    <el-dialog
      title="联系我们"
      :visible.sync="showDialog"
      width="30%"
      center
    >
      <span>联系电话：10086</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Welcome from './components/welcome'
export default {
  name: 'Strength',
  components: { Welcome },
  data() {
    return {
      tabList: ['最受欢迎品牌榜', '最受喜爱品牌榜', '最实用品牌榜', '最平价品牌榜', '最好骑电车品牌榜'],
      selet: 0,
      showDialog: false
    }
  },
  methods: {
    tabClick1(num) {
      this.selet = num
    }
  }
}
</script>

<style lang="scss" scoped>
.strength{
  // width: 100%;
  // text-align: center;
  .tab-box{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 20px;
    color: #FFF;
    text-align: center;
    position: relative;
    >li{
      width: 20%;
      height: 68px;
      line-height: 68px;
      border-bottom: 1px solid #EEEEEE;
      background-color: #DC3535;
      border-right: 1px solid #EEEEEE;
      position: relative;
      cursor: pointer;
    }
    .active{
      font-weight: bold;
    }
    .active::after{
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -100%);
      z-index: 1001;
      display:block;
      content:"";
      border-right:5px solid transparent;
      border-left:5px solid transparent;
      border-bottom:5px solid #fff;
    }
  }
  .ranking{
    width: 100%;
    text-align: center;
    margin: 30px;
    span{
      font-size:16px;
      line-height:21px;
      color:#787878;
    }
    button{
      width:94px;
      height:34px;
      background:#DC3535;
      border-radius:4px;
      color: #fff;
    }
  }
  .el-button{
    width:134px;
    height:46px;
  }
  .el-dialog__body span{
    font-size:22px;
    font-weight:400;
    line-height:29px;
  }
}
</style>
